<template>
  <view class="schedule-list">
    <view v-for="(day, date) in groupedSchedule" :key="date" class="schedule-day">
      <view class="date">{{ date }}</view>
      <view class="schedule-items">
        <view v-for="(item, idx) in day" :key="item.id" class="schedule-item">
          <view class="row1">
            <view class="cell time">{{ item.time }}</view>
            <view class="cell group">{{ item.group }}</view>
            <view class="cell event">{{ item.event }}</view>
            <view class="cell player">{{ item.player }}</view>
            <view class="cell date-short">{{ item.dateShort }}</view>
          </view>
          <view class="row2">
            <view class="cell"></view>
            <view class="cell"></view>
            <view class="cell event">
              <text class="type" :class="item.type === '决赛' ? 'final' : 'preliminary'">
                {{ item.type }}
              </text>
            </view>
            <view class="cell event-name">{{ item.eventName }}</view>
            <view class="cell"></view>
          </view>
          <view v-if="idx !== day.length - 1" class="divider"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  groupedSchedule: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style lang="scss" scoped>
.schedule-list {
          padding: 0 16rpx;
          padding-bottom: 20rpx;

          .schedule-day {
            .date {
              margin: 20rpx 0rpx;
            }


          }

          .schedule-item {
            background: #2D2E33;
            /* border-radius: 16rpx; */
            margin-bottom: 0;
            padding: 24rpx 0 0 0;
            font-size: 28rpx;
            position: relative;
            /* margin: 20rpx 0rpx; */
            border-bottom: 1rpx solid #000;
            padding: 30rpx 0rpx;

            .row1,
            .row2 {
              display: flex;
              align-items: center;
              padding: 0 24rpx;
            }

            .cell {
              width: 19%; 
              text-align: center;
              color: #fff;
              font-size: 28rpx;
              font-weight: 500;
              box-sizing: border-box;

              &.event-name {
                width: auto;
                flex: 1;
                color: #ccc;
                text-align: left;
                padding-left: 0;
                font-size: 26rpx;
                font-weight: 400;
              }

              &.event {
                text-align: center;
              }
            }

            .row2 {
              margin-top: 30rpx;
              min-height: 36rpx;

              .cell {
                color: #ccc;
                font-size: 26rpx;
                font-weight: 400;
                background: none;
              }

              .type {
                font-weight: 600;

                &.final {
                  color: #ff4d4f;
                }

                &.preliminary {
                  color: #ffd700;
                }
              }
            }
          }
        }
</style> 